<template>
  <div class="distribution-approval-detail">
    <!-- 页面头部返回按钮 -->
    <div class="page-header">
      <t-button theme="default" variant="base" @click="router.back()">
        <t-icon name="arrow-left" />
        <span>返回</span>
      </t-button>
    </div>

    <!-- 详情卡片 -->
    <t-card title="终端订单详情">
      <div class="order-detail-content">
        <!-- 左侧主要信息 -->
        <div class="left-content">
          <div class="info-row">
            <div class="info-item">
              <div class="label">所属地区：</div>
              <div class="value">重庆</div>
            </div>
            <div class="info-item">
              <div class="label">分销商名称：</div>
              <div class="value">重庆分销商黄先生</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <div class="label">销售地市：</div>
              <div class="value">重庆永川双石油库</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <div class="label">订单号：</div>
              <div class="value">13132132132132</div>
            </div>
            <div class="info-item">
              <div class="label">报价时间：</div>
              <div class="value">2025-03-24</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <div class="label">油品名称：</div>
              <div class="value">92号车用汽油</div>
            </div>
            <div class="info-item">
              <div class="label">单价金额：</div>
              <div class="value">6350</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <div class="label">申请数量：</div>
              <div class="value">19000.000KG</div>
            </div>
            <div class="info-item">
              <div class="label">申请时间：</div>
              <div class="value">2025-03-24 18:00:00</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <div class="label">终端账户名称：</div>
              <div class="value">中铁物产科技有限公司</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <div class="label">终端账户卡号：</div>
              <div class="value">167000000000</div>
            </div>
            <div class="info-item">
              <div class="label">预约未提数量：</div>
              <div class="value">0KG</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item full-width">
              <div class="label">超期不可提数量：</div>
              <div class="value">0KG</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <div class="label">银行卡号：</div>
              <div class="value">231213213213232321</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <div class="label">银行信息：</div>
              <div class="value">郑州银行铁路支行</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <div class="label">付款金额：</div>
              <div class="value">2333.00元</div>
            </div>
            <div class="info-item">
              <div class="label">上传时间：</div>
              <div class="value">2025-03-24 18:00:00</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <div class="label">付款凭证：</div>
              <div class="value">已上传</div>
            </div>
          </div>

          <!-- 付款凭证图片 -->
          <div class="payment-proof">
            <div class="proof-image" v-for="(item, index) in 3" :key="index"></div>
          </div>
        </div>

        <!-- 右侧审核状态 -->
        <div class="right-content">
          <div class="approval-status">
            <div class="status-item">
              <div class="label">订单状态：</div>
              <div class="value highlight">待审核</div>
            </div>

            <div class="status-item">
              <div class="label">收款凭证：</div>
              <div class="value">未上传</div>
            </div>

            <div class="status-item">
              <div class="label">上传时间：</div>
              <div class="value"></div>
            </div>

            <!-- 空白占位区域 -->
            <div class="status-placeholder"></div>

            <div class="status-item timeline">
              <div class="label">超期时间：</div>
              <div class="value timeline-content">
                <span>2025-03-24</span>
                <span class="separator">至</span>
                <span>2026-03-24</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="action-buttons">
        <t-button theme="danger" @click="rejectOrder">拒绝申请</t-button>
        <t-button theme="primary" @click="approveOrder">通过申请</t-button>
      </div>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';

const route = useRoute();
const router = useRouter();

// 获取路由参数
const orderId = route.params.id;

// 拒绝订单
const rejectOrder = () => {
  MessagePlugin.success('已拒绝该申请');
  router.back();
};

// 通过订单
const approveOrder = () => {
  MessagePlugin.success('已通过该申请');
  router.back();
};
</script>

<style lang="less" scoped>
.distribution-approval-detail {
  padding: 20px;

  .page-header {
    margin-bottom: 16px;
  }

  .order-detail-content {
    display: flex;
    gap: 20px;
  }

  .left-content {
    flex: 3;
  }

  .right-content {
    flex: 1;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
  }

  .info-row {
    display: flex;
    margin-bottom: 24px;

    .info-item {
      display: flex;
      flex: 1;

      &.full-width {
        flex: 2;
      }

      .label {
        min-width: 120px;
        color: #666;
        font-weight: 500;
      }

      .value {
        flex: 1;
        color: #333;
      }
    }
  }

  .payment-proof {
    display: flex;
    gap: 10px;
    margin-top: 10px;

    .proof-image {
      width: 100px;
      height: 100px;
      background-color: #eee;
      border-radius: 4px;
    }
  }

  .approval-status {
    .status-item {
      margin-bottom: 24px;

      .label {
        color: #666;
        margin-bottom: 8px;
      }

      .value {
        color: #333;

        &.highlight {
          color: #0052d9;
          font-weight: 500;
        }
      }

      &.timeline {
        .timeline-content {
          display: flex;
          align-items: center;

          .separator {
            margin: 0 8px;
            color: #999;
          }
        }
      }
    }

    .status-placeholder {
      height: 200px;
    }
  }

  .action-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
  }
}
</style>